<template>
  <div class="nav">
    <div class="hot">精选</div>
    <ul class="item" v-if="list.length">
      <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </ul>
    <div class="loading-container" v-show="!list.length">
      <loading :isText="false"></loading>
    </div>
    <div class="btn" @click="toggleMoreItemShow" ref="itemShow">
      <i class="icon icon-menu"></i>
    </div>
    <transition name="move">
    <ul class="more-item" v-show="moreItemShow && list.length">
      <li v-for="item in list" :key="item.id">
        <div class="img"><img :src="item.src"></div>
        {{item.name}}
      </li>
    </ul>
    </transition>
    <transition name="show">
    <div class="nav-bg" v-show="moreItemShow && list.length"></div>
    </transition>
  </div>
</template>

<script>
  import loading from '@/components/loading/loading';
  export default {
    props: {
      list: Array
    },
    data() {
      return {
        moreItemShow: false
      }
    },
    mounted(){
      this.$refs.itemShow.addEventListener('click',(e)=>{
        e.stopPropagation();
      });
    },
    watch: {
      moreItemShow (newValue, oldValue) {
        if(!newValue){
          document.removeEventListener('click',this.hideMoreItem,false);
        }else{
          document.addEventListener('click',this.hideMoreItem,false);
        }
      }
    },
    methods: {
      toggleMoreItemShow () {
        this.moreItemShow = !this.moreItemShow;
      },
      hideMoreItem() {
        console.log(1);
        if(!this.moreItemShow) return false;
        this.moreItemShow = false;
      }
    },
    components: {
      loading
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .nav {
    display: flex;
    position: relative;
    .nav-bg{
      position: fixed;
      z-index: 9;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background:rgba(0,0,0,0.5);
    }
    .item{
      z-index: 11;
      flex: 1;
      white-space:nowrap;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
      height: 38px;
      background-color: @color-background-l;
      li{
        font-size: @font-size-medium;
        display: inline-block;
        line-height: 38px;
        padding: 0 10px;
      }
      &::-webkit-scrollbar{
        display: none;
      }
    }
    .hot{
      z-index: 11;
      box-sizing: border-box;
      height: 38px;
      width: 50px;
      text-align: center;
      line-height: 38px;
      color: @color-theme;
      font-size: @font-size-medium;
      background-color: @color-background-l;
      .icon{
        margin-left: 12px;
        color: @color-text-l;
      }
    }
    .btn{
      z-index: 20;
      background-color: @color-background-l;
      height: 38px;
      width: 40px;
      line-height: 38px;
      .icon{
        margin-left: 12px;
        color: @color-text-l;
      }
    }
    .more-item{
      position: absolute;
      top: 38px;
      padding: 10px 0;
      left: 0;
      width: 100%;
      border-top:1px solid @color-border;
      background-color: @color-background-l;
      display: flex;
      flex-wrap: wrap;
      z-index: 10;
      li{
        box-sizing: border-box;
        padding: 10px;
        width: 25%;
        text-align: center;
        font-size: 12px;
        .img{
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .loading-container{
      background-color: @color-background-l;
      flex: 1;
      text-align: center;
      .loading{
        margin-top: 8px;
      }
    }
    .move-enter-active,.move-leave-active{
      transition: all 0.4s linear;
    }
    .move-leave-to,.move-enter{
      transform: translate3d(0, -100%, 0);
    }
    .show-enter-active,.show-leave-active{
      transition: all 0.2s linear;
    }
    .show-leave-to,.show-enter{
      opacity: 0;
    }
  }
</style>
